<template>
	<view>
		<view class="title-status">
			<image src="/static/icons/order_details_fail@3x.png" class="status-pic" v-if="returnDetail.state=='7'"></image>
			<image src="/static/icons/order_details_success@3x.png" class="status-pic" v-if="returnDetail.state=='6'"></image>
			<image src="/static/icons/order_details_verify@3x.png" class="status-pic" v-if="returnDetail.state=='5'"></image>
			<text class="status" v-if="returnDetail.state=='5'">退货状态：审核中</text>
			<text class="status" v-if="returnDetail.state=='6'">退货状态：退货成功</text>
			<text class="status" v-if="returnDetail.state=='7'">退货状态：退货失败</text>
			<text class="status" v-if="returnDetail.state=='0'">退货状态：已取消</text>
			<!-- <text class="status">退货状态：退货失败</text> -->
		</view>

		<view class="detail">
			<!-- 按需展示：退款金额 -->
			<view class="refund-amount">
				<view class="info-item">退款金额：{{returnDetail.tkAmount}}元</view>
				<view class="info-item">审核时间：{{returnDetail.auditDate?returnDetail.auditDate:'无'}}</view>
				<view class="info-item">审核备注：{{returnDetail.auditMemo?returnDetail.auditMemo:'无'}}</view>
			</view>
			<!-- 退货信息 -->
			<view class="refund-info">
				退货信息
			</view>

			<view class="refund-info-item">
				<view class="item-detail">
					退货原因：{{returnDetail.thMemo}}
				</view>
				<view class="item-detail">
					退货金额：{{returnDetail.tkAmount}}元
				</view>
				<view class="item-detail">
					快递公司：{{returnDetail.tkKdName}}
				</view>
				<view class="item-detail">
					快递单号：{{returnDetail.tkKdCode}}
				</view>
			</view>

			<!-- 订单信息 ： 数据从上页面传过来-->
			<!-- 订单信息 -->
			<view class="order-detail">
				<view style="height: 100rpx; line-height: 100rpx; font-size: 32rpx;
font-weight: bold;
color: #333333;margin-top: 30rpx;">
					订单信息
				</view>
				<view class="numbering">
					订单编号：<text class="txt">{{returnDetail.orderNumber}}</text>
				</view>
				<view class="amount">
					订单金额：<text class="txt">￥{{returnDetail.orderPrice}}</text>
				</view>
				<view class="packet">
					使用红包：<text class="txt">{{returnDetail.hb}}</text>
				</view>
				<view class="remark">
					订单备注：<text class="txt">{{returnDetail.memo?returnDetail.memo:'无'}}</text>
				</view>
			</view>

		</view>
		<view class="gap">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        returnDetail:{} // 退款信息
			};
		},
		onLoad(option) {
			console.log(JSON.parse(option.info))
			this.returnDetail=JSON.parse(option.info)
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	.title-status {
		height: 190rpx;
		display: flex;
		padding: 0 0 45rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid #DCDCDC;
	}

	.status-pic {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 30rpx;
	}

	.status {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}


	.detail {
		height: 600rpx;
		padding: 0 25rpx;
		box-sizing: border-box;

		.refund-amount {
			// height: 250rpx;
			display: flex;
			flex-direction: column;

			.info-item {
				height: 70rpx;
				line-height: 70rpx;
				display: flex;
				align-items: center;
			}
		}

		.refund-info {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin-top: 30rpx;
		}
	}

	.refund-info-item {
		padding-top: 30rpx;
		box-sizing: border-box;
		height: 280rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.item-detail {
			flex: 1;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.gap {
		width: 750rpx;
		height: 16rpx;
		background: #F4F4F4;
	}


	.order-detail {
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
		margin-bottom: 30rpx;

		.numbering,
		.amount,
		.packet,
		.remark {
			height: 65rpx;
			line-height: 65rpx;

			.txt {
				font-size: 28rpx;
				font-weight: 400;
				color: #898989;
				margin-left: 38rpx;
			}
		}

	}
</style>
